<template>
    <div ref="echartDiv" style="widht:100%;height:100%;">
        
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    name: 'Echarts',
    props: {
        options: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            mycharts: {}
        }
    },
    watch: {
        options: {
            handler: function() {
                this.doEcharts();
            },
            deep: true
        }
    },
    methods: {
        doEcharts() {
            if(JSON.stringify(this.mycharts) == '{}') {
                this.mycharts = echarts.init(this.$refs.echartDiv);
            }
            this.mycharts.setOption(this.options);
        }
    }
}
</script>